/**
 * Badge page
 */
import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  ScrollView,
} from 'react-native';

import {
  HText,
  Badge,
  Divider,
  Navbar,
} from '../../DodLibrary/index';

class BadgePage extends Component {
  render() {
    const {
      navigation,
    } = this.props;
    return (
      <View style={styles.container}>
        <Navbar
          title="Badge"
          leftIcon={{
            name: 'apps',
          }}
          leftOnPress={() => navigation.navigate('DrawerOpen')}
        />
        <ScrollView
          contentContainerStyle={{
            alignItems: 'center',
          }}>

          {/* dot */}
          <Divider />
          <HText.H20>
            ---dot---
          </HText.H20>
          <Divider />
          <Badge.Dot />

          <Divider />
          <HText.H16>
            change color
          </HText.H16>
          <Divider />
          <Badge.Dot color="#e91e63" />

          <Divider />
          <HText.H16>
            change size, and you can click it
          </HText.H16>
          <Divider />
          <Badge.Dot color="#e91e63" size={30} onPress={() => alert('hellow')} />

          <Divider />
          <HText.H16>
            normal usage
          </HText.H16>
          <Divider />
          <View
            style={{
              width: 45,
              height: 45,
              borderRadius: 5,
              backgroundColor: '#ccc',
            }}>
            <Badge.Dot color="#e91e63" topRight />
          </View>

          {/* put number */}
          <Divider />
          <HText.H20>
            ---number chip---
          </HText.H20>
          <Divider />

          <Badge.NumberChip
            number={20}
          />

          {/* redesign stylies of wrapper View and text */}
          <HText.H16>
            redesign stylies, put it to left, and you can click
          </HText.H16>
          <Divider />
          <Badge.NumberChip
            max={10}
            onPress={() => alert('hello Inuyasha')}
            activeOpacity={0.2}
            number={20}
            size={50}
            wrapperStyle={{
              alignSelf: 'flex-start',
              elevation: 10,
            }}
            textStyle={{
              fontSize: 20,
            }}
            color="#e91e63"
          />

          {/* meida chip */}
          <Divider />
          <HText.H20>
            ---media chip---
          </HText.H20>

          <Divider />
          <HText.H20>
            only text
          </HText.H20>
          <Badge.MediaChip
            text="hello Inuyasha"
          />

          <Divider />
          <HText.H20>
            put a image
          </HText.H20>
          <Divider />
          <Badge.MediaChip
            img="http://qiniu.enjoymemory.cn//image/background2.png"
            text="hello Inuyasha"
          />

          <Divider />
          <HText.H20>
            put an icon
          </HText.H20>
          <Divider />
          <Badge.MediaChip
            icon={{
              name: 'lock',
              color: 'green',
            }}
            text="hello Inuyasha"
          />

          <Divider />
          {/* a complex one */}
          <HText.H20>
            a complex one
          </HText.H20>
          <Badge.MediaChip
            img="http://qiniu.enjoymemory.cn//image/background2.png"
            text="hello Inuyasha"
            icon={{
              name: 'delete',
              color: '#f00',
            }}
            activeOpacity={0.3}
            onPress={() => alert('this is a media chip')}
            color="#eee"
            wrapperStyle={{
              elevation: 10,
            }}
            textStyle={{
              color: '#e91e63',
            }}
          />


        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

export default BadgePage;
